<template>
  <div class="background" style="height: 100%;">
    <div class="container">
      <img src="../assets/tubiao.png" style="width: 120px; height: 120px" />
      <div class="title">环保应急管理系统</div>
      <div class="version">V1.0.1</div>
    </div>
    <div class="zhongjian">
      <el-card class="center" style="max-width: 420px">
        <!-- CSS的行内样式要分号隔开 -->
        <template #header>
          <div class="card-header" style="height: 42px">
            <el-menu
              class="el-menu-demo"
              mode="horizontal"
              :default-active="activeIndex"
              :ellipsis="false"
              background-color="#145fca"
              router
            >
              <el-menu-item index="/LoginChildRouter/LoginAdmin" style="margin-left: 10px; margin-right: 25px; margin-top: -10px;font-size: 20px;">系统管理员登录</el-menu-item>
              <el-menu-item index="/LoginChildRouter/LoginDirector" style="margin-top: -10px;font-size: 20px;">指挥人员登录</el-menu-item>
            </el-menu>
          </div>
        </template>

        <div>
          <router-view />
        </div>
      </el-card>
      <div class="root">
      <span>帮助   隐私   条款</span>
      <br/>
      <span>copyright 2024 kalaxiaomi V1.0.1卡拉小米技术出品</span>
    </div>
    </div>
    
  </div>
</template>

<script setup>

import { ref,inject } from "vue";
const axios = inject("axios")
</script>

<style scoped>
.version {
  padding-top: 50px;
}

.title {
  font-size: 60px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 30px;
}
.background {
  background: url("../assets/bg.jpg");
}
.container {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.zhongjian {
  position: relative;
  background: url("../assets/logincenter.png");
  width: 1221px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: 120px;
}
.center {
  height: 360px;
  width: 660px;
  position: absolute;
  text-align: center;
  margin-left: 590px;
  margin-top: 80px;
  font-weight: bolder;
  font-size: 20px;
  background-color: #145fca; /* 可选：半透明的白色背景 */
  border-radius: 10px;
  border: 0 solid #145fca;
}
.root{
  height: 20px;
  width: 660px;
  position: absolute;
  text-align: center;
  margin-left: 320px;
  margin-top: 570px;
  font-size: 10px;
}

</style>